<template>
  <div class="home">
  {{ bar ||  0 }}
 
   <icon-font  type="iconshanchu" :style="{ fontSize:'40px' }" />
    <icon-font  type="iconkufang" :style="{ fontSize:'40px' }" />
        <a-pagination showSizeChanger  :defaultCurrent="3" :total="100" />
       <a-button type="primary">
      
      {{$t('title.Primary')}}
    </a-button>
    <!-- i18n使用$t(key的名称)-->  
    <span>{{$t('title.message')}}</span>
    <headrs :ts='app'>
 <div class="tarB">
      <el-carousel trigger="click" :interval="5000" arrow="never">
        <el-carousel-item v-for="item in 4" :key="item">
          <h3>{{ item }}</h3>
        </el-carousel-item>
      </el-carousel>
    </div>
    </headrs> 
    <div class="w w_new">
      <span class="new"> 最新资源/4654654</span>
      <span class="boer"></span>
    </div>
    <div class="w w_lr">
      <div class="w_classification">
        <span class="ification" :class="{ active:count == index }" v-for="(item ,index) in 15" :key="index">全部</span>
        <span class="ification more">  查看更多 </span>
      </div>
      <div class="da">
        <div class="lef_x">
          <div class="year" :class="{active:count2 == index}" v-for="(item,index) in 5" :key='index'>2020年图书</div>
        </div>
        <div class="right">
          <div class="right_r" v-for="item in 5" :key='item'>
            <img class="rimg" src="../assets/logo.png" alt="">
          <div class="info">
              <span>书名</span>
            <span>作者</span>
          </div>
          </div>
        </div>
      </div>
    </div>
    
     <a-form-model  :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
    <a-form-model-item label="Activity name">
      <a-input v-model="form.name" />
    </a-form-model-item>
    <a-form-model-item label="Activity zone">
      <a-select v-model="form.region" placeholder="please select your zone">
        <a-select-option value="shanghai">
          Zone one
        </a-select-option>
        <a-select-option value="beijing">
          Zone two
        </a-select-option>
      </a-select>
    </a-form-model-item>
    <a-form-model-item label="Activity time">
      <a-date-picker
        v-model="form.date1"
        show-time
        type="date"
        placeholder="Pick a date"
        style="width: 100%;"
        
      />
    </a-form-model-item>
    <a-form-model-item label="Instant delivery">
      <a-switch v-model="form.delivery" />
    </a-form-model-item>
    <a-form-model-item label="Activity type">
      <a-checkbox-group v-model="form.type">
        <a-checkbox value="1" name="type">
          Online
        </a-checkbox>
        <a-checkbox value="2" name="type">
          Promotion
        </a-checkbox>
        <a-checkbox value="3" name="type">
          Offline
        </a-checkbox>
      </a-checkbox-group>
    </a-form-model-item>
    <a-form-model-item label="Resources">
      <a-radio-group v-model="form.resource">
        <a-radio value="1">
          Sponsor
        </a-radio>
        <a-radio value="2">
          Venue
        </a-radio>
      </a-radio-group>
    </a-form-model-item>
    <a-form-model-item label="Activity form">
      <a-input v-model="form.desc" type="textarea" />
    </a-form-model-item>
    <a-form-model-item :wrapper-col="{ span: 14, offset: 8 }">
      <a-button type="primary" @click="onSubmit">
        Create
      </a-button>
      <a-button style="margin-left: 10px;">
        Cancel
      </a-button>
    </a-form-model-item>
  </a-form-model>
    
  </div>
</template>

<script>

import  headrs from '@/components/headers'
 import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
import moment from 'moment'
import 'moment/locale/zh-cn'
moment.locale('zh-cn')
const EN = 'en-us'
const ZH = 'zh-cn'
export default {
  name: "Home",
 inject:['app'],
  components:{
      headrs,
      
  },
  props:{
    bar: {
      type:Number,
      default(){
        return this.app
      } 
    }
  },
  data() {
    return {
      locale: zhCN,
      localeval: 'zh-cn',
     labelCol: { span: 4 },
      wrapperCol: { span: 4 },
      form: {
        name: '',
        region: undefined,
        date1: undefined,
        delivery: false,
        type: [],
        resource: '',
        desc: '',
      },
      count:0 ,
      count2:0,
    };
  },
  mounted() {
   console.log(this.app)
  },
  methods: {
     onSubmit() {
      console.log('submit!', this.form);
    },
  },
};
</script>
<style lang='scss' scoped>

.tarB{
  .el-carousel__item h3 {
    color: #09dfd4;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #f50b3e;
  }

  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }
}
.w_new {
  display: flex;
  flex-direction: column;
align-items: center;
justify-content: center;
.new{
display: block;
color: salmon;
font-size: 20px;
margin-bottom: 10px;
}
.boer {
border: 1px solid #999;
display: block;
width: 10%;
}
}
 .w_lr {
   display: flex;
   flex-direction: column;
   .w_classification {
     padding: 5px 20px;
     .ification {
       display: inline-block;
      padding: 10px;
      font-size: 16px;
     }
     .more {
       border: 1px solid blue;
       color: blue;
     }
     .active {
        background: blue;
        color: #fff;
     }
     .ification:hover {
        background: blue;
        color: #fff;
        cursor:pointer
     }
   }
   .da {
     width: 100%;
     box-sizing: border-box;
   
     display: flex;
     .lef_x {
       margin-right: 10px;
       .year {
    height: 45px;
    width: 180px;
    font-size: 18px;
    background: #666;
    color: #ccc;
    margin-bottom: 10px;
    text-align: center;
    line-height: 45px;
       }
       .year:last-child {
         margin-bottom: 0;
       }
       .active {
        background: blue;
        color: #fff;
       }
        .year:hover {
          background: blue;
        color: #fff;
       }
     }
     .right {
       display: flex;
       flex-direction: row;
       justify-content: center;
       align-items: center;
     
       width: 100%;
       box-sizing: border-box;
      .right_r {
        margin-right: 55px;
     
      width: 140px;
      .rimg {
        display: inline-block;
        width: 100%;
      }
      .info {
        display: flex;
        flex-direction: column;
      }
      }
      .right_r:last-child {
        margin-right:0 ;
      }
     }
   }
 }
</style>